<template>
  <div style="width: 60%;margin: 0 auto">
    <el-container style="border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu background-color="#606266" text-color="#ffffff" :unique-opened=true  default-active="1-1">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-custom"></i>我的大融小贷</template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="changeTitle('userinfo')" selec>账户主页</el-menu-item>
              <el-menu-item index="1-2" @click="changeTitle('usermaterial')">账户设置</el-menu-item>
              <el-menu-item index="1-3" @click="changeTitle('usermanagent')">认证管理</el-menu-item>
              <el-menu-item index="1-4" @click="changeTitle('userpassword')">密码设置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>资金管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="changeTitle('mymoney')">资金记录</el-menu-item>
              <el-menu-item index="2-2" @click="changeTitle('mycharge')">充值记录</el-menu-item>
              <el-menu-item index="2-3" @click="changeTitle('mydraw')">提现记录</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>理财管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="changeTitle('myborrowHistory')">借贷记录</el-menu-item>
              <el-menu-item index="3-2" @click="changeTitle('mybankSet')">银行卡管理</el-menu-item>
              <el-menu-item index="3-3" @click="changeTitle('mydepositsHistory')">投资记录</el-menu-item>
              <el-menu-item index="3-4" @click="changeTitle('myrepay')">偿还贷款</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-setting"></i>我的管理</template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="changeTitle('myshopping')">我的购物券</el-menu-item>
              <el-menu-item index="4-2" @click="changeTitle('myintegration')">我的积分</el-menu-item>
              <el-menu-item index="4-3" @click="changeTitle('mymessage')">我的信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <component :is="title"/>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import userpassword from "./userinfo/userpassword";
  import usermaterial from "./userinfo/usermaterial";
  import usermanagent from "./userinfo/usermanagent";
  import userinfo from "./userinfo/userinfo";
  import myshopping from "./userinfo/myshopping";
  import myrepay from "./userinfo/myrepay";
  import mymoney from "./userinfo/mymoney";
  import mymessage from "./userinfo/mymessage";
  import myintegration from "./userinfo/myintegration";
  import mydraw from "./userinfo/mydraw";
  import mydepositsHistory from "./userinfo/mydepositsHistory";
  import mycharge from "./userinfo/mycharge";
  import myborrowHistory from "./userinfo/myborrowHistory";
  import mybankSet from "./userinfo/mybankSet";

  export default {
    name: "settings",
    components:{
      userinfo,userpassword,usermanagent,usermaterial,mybankSet,myborrowHistory,mycharge,mydepositsHistory,mydraw,myintegration,
      mymessage,mymoney,myrepay,myshopping
    },
    data(){
          return{
            title: 'userinfo',
            fold1:true,
            fold2:true,
            fold3:true,
            fold4:true,
          }
    },
    created() {
      if (localStorage.token == 0){
        alert("请先登录")
        this.$emit("func", "login")
      }
    },
    methods: {
          changeTitle: function (t) {
            this.title=t
          },
          fold: function (i) {
            switch (i) {
              case(1):
                this.fold1=!this.fold1
                break;
              case(2):
                this.fold2=!this.fold2
                break;
              case(3):
                this.fold3=!this.fold3
                break;
              case(4):
                this.fold4=!this.fold4
                break;

            }
          }

    }
  }
</script>
<style scoped>
  @import '../assets/usercss/css/UserCSS.css';
</style>
